<script lang="ts" setup>
import apply from '@/api/apply'
import { useApplyStore, useAppStore } from '@/store'

const applyStore = useApplyStore()
const {
  phoneNumber,
  mer_type,
  applyId,
  steps
} = storeToRefs(applyStore)

const {
  windowHeight,
  customBarHeight
} = storeToRefs(useAppStore())

interface Item {
  ROW_ID: number
  applyDate: string
  applyId: string
  merName: string
  merType: string
  progressStatus: string
  statusDesc: string
}

const total = ref(0)
const page = ref(1)
const list = ref<Item[]>([])
const pageSize = ref(5)
const loading = ref<boolean>(false)
const end = ref<boolean>(false)

onMounted(async () => {
  list.value = []
  page.value = 1
  await getList(1)
})

const searchValue = ref('')

async function getList(p: number) {
  loading.value = true
  const { data } = await apply.progressQuery({
    pageNum: p,
    pageSize: pageSize.value,
    phoneNumber: phoneNumber.value,
    merName: searchValue.value
  })
  loading.value = false
  if (data.status === 'success') {
    total.value = data.data.total
    page.value = data.data.pageNum


    let lists = data.data.progressList
    lists.forEach((e) => {
      e.fristName = e.merName.charAt(0)
    })

    list.value = list.value.concat(lists)

    // list.value = list.value.concat(data.data.progressList)
    if (page.value * pageSize.value >= total.value) {
      end.value = true
    }
  }
}

function scrolltolower () {
  if (!end.value) {
    getList(page.value + 1)
  }
}

watch(() => searchValue.value, () => {
  list.value = []
  page.value = 1
  getList(1)
})

async function modify (item: Item) {
  mer_type.value = item.merType
  applyId.value = item.applyId
  // 先调接口获取
  if (item.merType === '3') {
    const { data } = await apply.getSmallMerchantInfo(item.applyId)
    applyStore.resetApplyInfo()
    applyStore.resetSteps()
    applyStore.setApplyInfo(data.data)
    uni.navigateTo({
      url: `/pages-sub/apply/input-${steps.value[0]}`
    })
  } else {
    const { data } = await apply.getMerchantInfo(item.applyId)
    applyStore.resetApplyInfo()
    applyStore.resetSteps()
    applyStore.setApplyInfo(data.data)
    uni.navigateTo({
      url: `/pages-sub/apply/input-${steps.value[0]}`
    })
  }
}

function del(item: Item) {
  uni.showModal({
    title: '删除确认',
    content: `您是否要删除 ${item.merName} 该条记录？`,
    success: async (res) => {
      if (res.confirm) {
        const { data } = await apply.delInfo(item.applyId)
        if (data.status === 'success') {
          uni.showToast({
            title: data.message,
          })
          list.value = []
          page.value = 1
          await getList(1)
        }
      }
      else if (res.cancel) {
        // console.log('用户点击取消')
      }
    },
  })
}
function goDetail(item: Item) {
  uni.navigateTo({
    url: `/pages-sub/apply/detail?applyId=${item.applyId}&merType=${item.merType}`,
  })
}

function merTypeName(mer: string) {
  return {
    '1': '个体工商户',
    '2': '企业',
    '3': '小微商户',
    '4': '事业单位',
    '5': '政府机关',
    '6': '其他组织',
  }[mer]
}
</script>

<template>
  <div>
    <nut-searchbar placeholder="输入商户名称" v-model="searchValue">
      <template #leftin>
        <nut-icon name="search2" />
      </template>
      <template #rightout>
        <nut-button type="primary" size="small">搜索</nut-button>
      </template>
    </nut-searchbar>

    <div class="list">
      <template v-if="list.length > 0">
        <scroll-view scroll-y :style="{ height: `${windowHeight - customBarHeight - 40 - 40}px` }"
          @scrolltolower="scrolltolower">

          <div class="li-card-item shake_o shadow" v-for="(item, index) in list" :key="index">
            <div class="content-box1" :class="(item.progressStatus === '05' || item.progressStatus === '08') ? 'b-c2' : item.progressStatus === '01' ? 'b-c3':'b-c1'">
              <div class="cb-lft">
                <div class="first">{{ item.fristName }}</div>
                <div class="info">
                  <div class="name">{{ item.merName }}</div>
                  <div class="id">{{ item.applyId }}</div>
                </div>
              </div>
              <div class="cb-rit" :class="(item.progressStatus === '05' || item.progressStatus === '08') ? 'c2' : item.progressStatus === '01' ? 'c3' : 'c1'">{{ item.statusDesc }}
              </div>
            </div>
            <div class="content-box2">
              <div class="item">
                <div class="lable">商户类型</div>
                <div class="name">{{ merTypeName(item.merType) }}</div>
              </div>
            </div>
            <div class="content-btn">
              <div class="c-btn" style="background-color: #2196f3" v-if="item.progressStatus === '01'"
                @click="modify(item)">修改</div>
              <div class="c-btn" style="background-color: #eb0909"
                v-if="item.progressStatus === '01' || item.progressStatus === '05'" @click="del(item)">删除</div>
            </div>
            <div class="content-bot" @click="goDetail(item)">
              <div class="cbt-lft">申请时间:{{ item.applyDate }}</div>
              <div class="cbt-rit">查看<i class="i-ri:arrow-right-s-line"></i></div>
            </div>
            <div style="padding-bottom: 10rpx;"></div>
          </div>
          <div v-if="end" class="end">没有更多数据了</div>
          <div v-if="loading" class="loading">
            <nut-icon name="loading" />
            数据加载中...
          </div>
        </scroll-view>
      </template>
      <nut-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "进度查询",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.list
  padding: 20rpx
  .item
    background-color: #fff
    border-radius: 6px
    margin-bottom: 15px
    .top
      border-bottom: 1px solid #e8e8e8
      padding: 10px 13px
      .title
        color: #2196F3
    .content
      display: flex
      justify-content: space-between
      padding: 12px 18px 0
      .left
        .line
          margin-bottom: 12px
          .key
            display: inline-block
            margin-right: 12px
          .value
            display: inline-block
      .right
        .mod
          margin-bottom: 10px
  .end
    text-align: center
    color: #8e8e8e
  .loading
    text-align: center
    color: #8e8e8e
</style>
